<project-header class="top-header"></project-header>
<project-page>

  <!-- Middle section -->
  <div class="middle-section">
    <div class="middle-container">
      <div class="middle-header">
        <div class="container-fluid">
          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
          <alerts alerts="alerts"></alerts>
          <div ng-if="!loaded" class="mar-top-xl">Loading...</div>
          <div ng-if="serviceInstance">
            <h1 class="contains-actions">
              <div class="pull-right dropdown" ng-hide="!('serviceInstances' | canIDoAny)">
                <!-- Primary Actions -->
                <button
                  ng-if="editAvailable && (serviceInstancesVersion | canI : 'update')"
                  class="btn btn-default hidden-xs"
                  ng-click="showEditDialog()">
                  Edit
                </button>

                <!-- Secondary Actions -->
                <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
                  Actions
                  <span class="caret"></span>
                </button>
                <a href=""
                   class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
                   data-toggle="dropdown"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="sr-only">Actions</span></a>
                <ul class="dropdown-menu dropdown-menu-right actions action-button">
                  <li class="visible-xs-inline" ng-if="editAvailable && (serviceInstancesVersion  | canI : 'update')">
                    <a href=""
                       role="button"
                       ng-click="showEditDialog()">Edit</a>
                  </li>
                  <li ng-if="serviceInstancesVersion | canI : 'update'">
                    <a ng-href="{{serviceInstance | editYamlURL}}" role="button">Edit YAML</a>
                  </li>
                  <li ng-if="serviceInstancesVersion | canI : 'delete'">
                    <a href="" ng-click="deprovision()" ng-attr-aria-disabled="{{serviceInstance.metadata.deletionTimestamp ? 'true' : undefined}}" ng-class="{ 'disabled-link': serviceInstance.metadata.deletionTimestamp }" role="button">Delete</a>
                  </li>
                </ul>
              </div>
              {{displayName}}
              <small class="list-row-longname" ng-if="displayName !== serviceInstance.metadata.name">
                {{serviceInstance.metadata.name}}
              </small>
              <div>
                <small class="meta">created <span am-time-ago="serviceInstance.metadata.creationTimestamp"></span></small>
              </div>
            </h1>
            <labels labels="serviceInstance.metadata.labels" clickable="true" kind="service-instances" project-name="{{serviceInstance.metadata.namespace}}" limit="3"></labels>
          </div>
        </div>
      </div><!-- /middle-header-->
      <div class="middle-content service-instance-details" persist-tab-state>
        <div class="container-fluid">
          <div class="row" ng-if="serviceInstance">
            <div class="col-md-12">
              <div ng-if="serviceInstance.metadata.deletionTimestamp" class="alert word-break alert-warning">
                <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
                <span class="sr-only">warning</span>
                <span class="strong">The service was marked for deletion</span>
                <span class="strong" am-time-ago="serviceInstance.metadata.deletionTimestamp"></span>.
              </div>
              <uib-tabset>
                <uib-tab active="selectedTab.details">
                  <uib-tab-heading>Details</uib-tab-heading>
                  <div class="resource-details">
                    <div class="row">
                      <div class="col-lg-6">
                        <h3>Status</h3>
                        <dl class="dl-horizontal left">
                          <dt>Status:</dt>
                          <dd>
                            <status-icon status="serviceInstance | serviceInstanceStatus" disable-animation></status-icon>
                            <span>{{serviceInstance | serviceInstanceStatus | sentenceCase}}</span>
                          </dd>
                          <dt ng-if-start="serviceInstance | serviceInstanceConditionMessage">Status Reason:</dt>
                          <dd ng-if-end class="instance-status-message">{{serviceInstance | serviceInstanceConditionMessage}}</dd>
                        </dl>
                        <div class="hidden-lg">
                          <h3 ng-if-start="serviceClass.spec.description || serviceClass.spec.externalMetadata.longDescription">Description</h3>
                          <p class="service-description"><truncate-long-text
                            limit="500"
                            content="serviceClass.spec.description"
                            use-word-boundary="true"
                            expandable="true"
                            linkify="true">
                          </truncate-long-text></p>
                          <p ng-if-end class="service-description"><truncate-long-text
                            limit="500"
                            content="serviceClass.spec.externalMetadata.longDescription"
                            use-word-boundary="true"
                            expandable="true"
                            linkify="true">
                          </truncate-long-text></p>
                        </div>
                        <h3>Plan</h3>
                        <p ng-bind-html="plan.spec.description | linkify : '_blank'"></p>
                        <div ng-if="parameterSchema.properties" class="config-parameters-form">
                          <h3>
                            <span>Configuration</span>
                            <a ng-if="allowParametersReveal" href="" class="hide-show-link" ng-click="toggleShowParameterValues()" role="button">
                              {{showParameterValues ? 'Hide Values' : 'Reveal Values'}}
                            </a>
                          </h3>
                          <form name="forms.orderConfigureForm" >
                            <catalog-parameters
                              hide-values="!showParameterValues"
                              opaque-keys="opaqueParameterKeys"
                              model="parameterData"
                              parameter-schema="parameterSchema"
                              parameter-form-definition="parameterFormDefinition"
                              is-horizontal="true"
                              read-only="true">
                            </catalog-parameters>
                          </form>
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="hidden-xs hidden-sm hidden-md">
                          <h3 ng-if-start="serviceClass.spec.description || serviceClass.spec.externalMetadata.longDescription">Description</h3>
                          <p class="service-description"><truncate-long-text
                            limit="500"
                            content="serviceClass.spec.description"
                            use-word-boundary="true"
                            expandable="true"
                            linkify="true">
                          </truncate-long-text></p>
                          <p ng-if-end class="service-description"><truncate-long-text
                            limit="500"
                            content="serviceClass.spec.externalMetadata.longDescription"
                            use-word-boundary="true"
                            expandable="true"
                            linkify="true">
                          </truncate-long-text></p>
                        </div>
                        <service-instance-bindings
                          show-header="true"
                          project="project"
                          bindings="bindings"
                          service-instance="serviceInstance"
                          service-class="serviceClass"
                          service-plan="plan">
                        </service-instance-bindings>
                      </div>
                    </div>
                    <annotations annotations="serviceInstance.metadata.annotations"></annotations>
                  </div>
                </uib-tab>
                <uib-tab active="selectedTab.events" ng-if="eventsVersion | canI : 'watch'">
                  <uib-tab-heading>Events</uib-tab-heading>
                  <events api-objects="[ serviceInstance ]" project-context="projectContext" ng-if="selectedTab.events"></events>
                </uib-tab>
              </uib-tabset>
            </div><!-- /col-* -->
          </div>
        </div>
        <overlay-panel show-panel="editDialogShown" handle-close="closeEditDialog">
          <update-service service-instance="serviceInstance"
                          project="project"
                          base-project-url="project"
                          service-class="serviceClass"
                          service-plans="servicePlans"
                          handle-close="closeEditDialog">
          </update-service>
        </overlay-panel>
      </div><!-- /middle-content -->
    </div><!-- /middle-container -->
  </div><!-- /middle-section -->
</project-page>
